<template>
    <div class="permission-list">
        <el-table :data="menuTree" row-key="id" default-expand-all>
            <el-table-column prop="name" label="权限名称"></el-table-column>
            <el-table-column label="权限类型" width="200">
                <template #default="{row}">
                    {{row.menuType === 1 ? '按钮' : '菜单'}}
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="{row}">
                    <el-button v-if="buttons[$buttonCode.add] && row.menuType === 0" type="text" size="small" @click="addChild(row)">添加子权限</el-button>
                    <template v-if="row.id !== 1">
                        <el-button type="text" size="small" @click="edit(row)" v-if="buttons[$buttonCode.update]">编辑</el-button>
                        <el-button type="text" size="small" @click="del(row)" v-if="buttons[$buttonCode.del]">删除</el-button>
                    </template>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog :visible.sync="editVisible" :title="isEdit ? '编辑权限' : '添加权限'">
            <el-form
                :model="form"
                :rules="rules"
                ref="form"
                label-width="100px"
                label-position="left"
                class="demo-form"
            >
                <el-form-item label="上级权限：">
                    <span v-text="form.pName"></span>
                </el-form-item>
                <el-form-item label="权限名称：" prop="name">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="权限类型：" prop="menuType">
                    <el-radio v-model="form.menuType" :label="0">菜单</el-radio>
                    <el-radio v-model="form.menuType" :label="1">按钮</el-radio>
                </el-form-item>
                <el-form-item label="权限编码：" prop="menuCode">
                    <el-input v-model="form.menuCode"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button size="small" type="primary" :disabled="btnDisabled" @click="save">保存</el-button>
                <el-button size="small" @click="editVisible = false">取消</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import {getPermissionList, getPermission, delPermission, updatePermission} from '@/api/user';
import mixin from '@/mixins/buttons'

export default {
    name: 'menuManagement',
    mixins: [mixin],
    data() {
        return {
            keyword: '',
            menuTree: [],
            editVisible: false,
            isEdit: false,
            form: {
                name: '',
                pId: '',
                pName: '',
                menuType: 0,
                menuCode: '',
            },
            rules: {
                name: [
                    {required: true, message: '请输入权限名称', trigger: 'blur'},
                ],
                menuType: [
                    {required: true, message: '请选择权限类型', trigger: 'blur'},
                ],
                menuCode: [
                    {required: true, message: '请输入权限编码', trigger: 'blur'},
                ],
            },
            btnDisabled: false,
        };
    },
    created() {
        this.getPermissionList();
    },
    methods: {
        // 获取所有权限
        getPermissionList() {
            getPermissionList({
                pId: -1,
            }).then(({data}) => {
                this.menuTree = data;
            }).catch(err => {
                this.menuTree = [];
            });
        },
        // 添加一级权限
        addFirst() {
            this.isEdit = false;
            this.form = {
                name: '',
                pId: 0,
                pName: '顶级权限',
                menuType: 0,
                menuCode: '',
            };
            this.editVisible = true;
        },
        // 添加子权限
        addChild(item) {
            const {name, id} = item;
            this.isEdit = false;
            this.form = {
                name: '',
                pId: id,
                pName: name,
                menuType: 0,
                menuCode: '',
            };
            this.editVisible = true;
        },
        // 修改权限
        edit(item) {
            const {name, id, pId, pName, menuType, menuCode} = item;
            this.isEdit = true;
            this.form = {
                id,
                name,
                pId,
                pName,
                menuType,
                menuCode,
            };
            this.editVisible = true;
        },
        save() {
            this.$refs.form.validate((valid) => {
                if (!valid) {
                    return;
                }
                this.btnDisabled = true;
                const {name, id, pId, menuType, menuCode} = this.form;
                const body = {name, menuType, menuCode, pId};
                if (this.isEdit) {
                    body.id = id;
                }
                updatePermission(body).then(() => {
                    this.$message.success('保存成功');
                    this.btnDisabled = false;
                    this.getPermissionList();
                    this.editVisible = false;
                }).catch(err => {
                    this.btnDisabled = false;
                });
            });
        },
        // 删除
        async del(item) {
            const {id, name} = item;
            try {
                await this.$confirm(`确定要删除权限 ${name} 吗?`, '确认删除');
                await delPermission({id});
                this.$message.success('删除权限成功');
                this.getPermissionList();
            } catch (e) {
                console.log(e);
            }
        },
    },
};
</script>

<style lang="less">
// .pageContainer {
//   /deep/ .el-table {
//     .has-gutter {
//       .is-leaf {
//         // text-align: center !important;
//       }
//     }
//   }
// }
</style>
